<template>
  <div class="swiper-content">
    <div class="swiper-list-content">
      <ul ref="ulContant" :style="{ transform: 'translateX' + '(' + currentOffset + 'px' + ')'}">
        <li
          v-for="(item,index) in swiperData"
          :key="item.id"
          @click="tabClick(index)"
          :class="{'active':activeIndex === index}"
        >
          <img :src="item.imgUrl" />
        </li>
      </ul>
    </div>
    <div class="swiper-button-next" :disabled="atHeadOfList" @click="moveCarousel(-1)">
      <i class="iconfont iconleft"></i>
    </div>
    <div class="swiper-button-prev" @click="moveCarousel(1)" :disabled="atEndOfList">
      <i class="iconfont iconright"></i>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    logoList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      swiperData: [
        // {
        //   id: 1,
        //   imgSrc:
        //     require("@/assets/images/logo-1.png"),
        // },
        // {
        //   id: 2,
        //   imgSrc:
        //     require("@/assets/images/logo-2.png"),
        // },
        // {
        //   id: 3,
        //   imgSrc:
        //     require("@/assets/images/logo-3.png"),
        // },
        // {
        //   id: 4,
        //   imgSrc:
        //     require("@/assets/images/logo-1.png"),
        // },
        // {
        //   id: 5,
        //   imgSrc:
        //     require("@/assets/images/logo-2.png"),
        // },
        // {
        //   id: 6,
        //   imgSrc:
        //     require("@/assets/images/logo-3.png"),
        // }
      ],
      pageWidth: 0,
      currentOffset: 0, //切换的那个一个
      ulWidth: 0,
      windowSize: 0,
      liWidth: 0,
      activeIndex: 0,
      lastIndex:0
    };
  },
  watch: {
    logoList: {
      handler(newV) {
        this.swiperData = newV;
        if (this.swiperData.length !==0) {
          this.getWidth();
          this.$emit("newsLogoClick", this.swiperData[0]);
        }
      },
      deep: true,
    },
  },
  computed: {
    atEndOfList() {
      return (
        this.currentOffset <=
        this.liWidth * -1 * (this.swiperData.length - this.windowSize)
      );
    },
    atHeadOfList() {
      return this.currentOffset === 0;
    },
  },
  mounted() {
    this.swiperData.push(this.logoList);
    if (this.swiperData.length !==0) {
      this.getWidth();
      this.$emit("newsLogoClick", this.swiperData[0]);
    }
  },
  methods: {
    tabClick(index) {
      this.activeIndex = index;
      // if(index+1>2){

     
      // if(this.lastIndex>index){
      //   this.currentOffset+=100
      // }else if(this.lastIndex<index){
      //   this.currentOffset-=100
      // } 
      // }
      // this.lastIndex = index
      // if(index+1%4>this.windowSize){
      //   this.moveCarousel(1)
      // } else {
      //   this.moveCarousel(-1)
      // }
      this.$emit("newsLogoClick", this.swiperData[index]);
    },
    moveCarousel(direction) {
      if (direction === 1 && !this.atEndOfList) {
        this.currentOffset -= this.liWidth;
      } else if (direction === -1 && !this.atHeadOfList) {
        this.currentOffset += this.liWidth;
      }
    },
    getWidth() {
      this.$nextTick(() => {
        this.ulWidth = this.$refs.ulContant.offsetWidth;
        this.pageWidth =
          (this.$refs.ulContant.children[0].offsetWidth - 10) *
          this.$refs.ulContant.children.length;
        this.liWidth = this.$refs.ulContant.children[0].offsetWidth - 10;
        this.windowSize = Math.floor(this.ulWidth / this.liWidth);
      });
    },
  },
};
</script>

<style lang="stylus" scoped>
.swiper-content {
  width: 100%;
  padding: 0 35px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;

  .swiper-list-content {
    overflow: hidden;

    ul {
      white-space: nowrap;
      margin-bottom: 0;

      li {
        display: inline-block;
        margin-right: 5px;
        font-size: 0;
        padding: 5px;
        box-sizing: border-box;

        img {
          width: 100px;
          height: 49px;
        }
      }

      li.active {
        padding: 18px;

        img {
          box-shadow: 0 0 18px rgba(102, 167, 255, 0.54);
          width: 138px;
          height: 68px;
          border-radius: 4px;
        }
      }
    }
  }

  .swiper-button-next {
    position: absolute;
    left: 2px;
    top: 41px;
    cursor: pointer;
    background: rgba(135, 162, 198, 0.6);
    border-radius: 100%;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 23px;

    i {
      font-size: 14px;
      color: #ffffff;
    }
  }

  .swiper-button-prev {
    position: absolute;
    right: 2px;
    top: 41px;
    cursor: pointer;
    background: rgba(135, 162, 198, 0.6);
    border-radius: 100%;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 23px;

    i {
      font-size: 14px;
      color: #ffffff;
    }
  }
}
</style>